import './App.scss'
import { Spin } from 'antd'
// 导入路由
import { Route, Switch, Redirect, Router } from 'react-router-dom'
import { lazy, Suspense } from 'react'
// 导入自己封装的鉴权路由
import { AuthRoute } from './components/AuthRoute'
// 导入自定义history
import history from './utils/history'

// 导入页面组件(使用懒加载)
const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))


// 配置路由规则
function App() {
  return (
    <Router history={history}>
      <Suspense fallback={<div className="loading-box"><Spin tip="Loading" size="large"/></div>}>
        <div className="App">
          <Switch>
            <Route path="/login" component={Login}></Route>
            <AuthRoute path="/home" component={Layout}></AuthRoute>
            <Redirect path="/" to="/home" />
          </Switch>
        </div>
      </Suspense>
    </Router>
  )
}

export default App